<template>
  <div :id="detail.identifier" :style="{
        fontSize: detail.style.fontSize + 'px',
        fontFamily: detail.style.fontFamily,
        color: detail.style.foreColor,
        textAlign: detail.style.textAlign,
        lineHeight: detail.style.position.h + 'px',
        border: detail.style.waterBorderWidth + 'px solid !important',
        borderRadius: detail.style.borderRadius + 'px !important',
        borderColor: detail.style.waterBorderColor,
        fontWeight: detail.style.fontWeight
    }" @dblclick="startEditing" @mouseleave="stopEditing">
    <span v-if="!isEditing">{{ detail.style.text }}</span>
    <el-input v-else v-model="editedContent" size="small" style="width: 100%;" @blur="stopEditing"
              @keyup.enter="stopEditing"/>
  </div>
</template>

<script>

import BaseView from './View';
import topoUtil from '@/views/zutai/components/topo/util/topo-util';

export default {
  name: 'view-text',
  extends: BaseView,
  data() {
    return {
      isEditing: false,
      editedContent: "",
    }
  },
  watch: {
    paramValue(newVal, oldVal) {
      //数值初始化
      let paramValue = newVal;
      if (this.detail.dataBind.stateTextList && this.detail.dataBind.stateTextList.length > 0) {
        this.detail.dataBind.stateTextList.forEach(element => {
          let isSure = topoUtil.judgeSize(element.paramCondition, paramValue, element.paramData);
          if (isSure) {
            this.detail.style.foreColor = element.foreColor;
            this.detail.style.text = element.paramText;
          }
        });
      } else {
        let unit = this.detail.dataBind.paramUnit == null ? '' : this.detail.dataBind.paramUnit
        this.detail.style.text = paramValue + unit;
      }
    },
  },
  methods: {
    startEditing() {
      // 进入编辑模式时保存原始内容
      this.editedContent = this.detail.style.text;
      this.isEditing = true;
      this.detail.isLock = true;
    },
    stopEditing() {
      if (this.editedContent) {
        // 退出编辑模式时更新内容
        this.detail.style.text = this.editedContent;
        this.isEditing = false;
        this.detail.isLock = false;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.view-text {
  height: 100%;
  width: 100%;
}
</style>
